<template>
  <div class="league-container">
    <search-menu @search="handleSearch" @reset="handleReset" class="search">
      <InputItem lable="名称">
        <el-input placeholder="请输入" v-model="searchForm.name"></el-input>
      </InputItem>
    </search-menu>
    <div class="table">
      <el-button @click="handleAdd" type="primary" class="add-button"
        >新增</el-button
      >
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="img" label="图片"> </el-table-column>
        <el-table-column prop="info" label="知识信息"> </el-table-column>
        <el-table-column prop="rank" label="排序"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="op-buttons">
              <TableButton @click="handleEdit(scope.row)">编辑</TableButton>
              <TableButton @click="handleDelete(scope.row)">删除</TableButton>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <customPagination
        :paginationData="paginationData"
        @getList="handleGetList"
      ></customPagination>
    </div>
    <el-dialog :visible.sync="showAddDialog" title="新增">
      <el-form :model="addDialogData" :rules="dialogFormRules" ref="addForm">
        <div class="dialog-line">
          <el-form-item label="名称:" prop="name" class="dialog-item">
            <el-input
              placeholder="请输入"
              v-model="addDialogData.name"
              class="dialog-input"
            ></el-input>
          </el-form-item>
          <el-form-item label="知识信息:" prop="info" class="dialog-item">
            <el-select
              placeholder="请选择"
              v-model="addDialogData.info"
              class="dialog-input"
            >
              <el-option
                v-for="(item, i) in infoOptions"
                :key="i"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="图片:" prop="img">
          <ImgUploader
            v-model="addDialogData.img"
          />
        </el-form-item>
        <div class="buttons">
          <el-button
            type="plain"
            @click="
              () => {
                this.showAddDialog = false;
              }
            "
            >取消</el-button
          >
          <el-button type="primary" @click="handleAddSubmit">提交</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="showEditDialog" title="编辑">
      <el-form :model="editDialogData" :rules="dialogFormRules" ref="editForm">
        <div class="dialog-line">
          <el-form-item label="名称:" prop="name" class="dialog-item">
            <el-input
              placeholder="请输入"
              v-model="editDialogData.name"
              class="dialog-input"
            ></el-input>
          </el-form-item>
          <el-form-item label="知识信息:" prop="info" class="dialog-item">
            <el-select
              placeholder="请选择"
              v-model="editDialogData.info"
              class="dialog-input"
            >
              <el-option
                v-for="(item, i) in infoOptions"
                :key="i"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="图片:" prop="img">
          <ImgUploader
            v-model="editDialogData.img"
          />
        </el-form-item>
        <el-form-item label="排序:" prop="rank" class="dialog-item">
          <el-input
            placeholder="请输入"
            v-model="editDialogData.rank"
            class="dialog-input"
          ></el-input>
        </el-form-item>
        <div class="buttons">
          <el-button
            type="plain"
            @click="
              () => {
                this.showEditDialog = false;
              }
            "
            >取消</el-button
          >
          <el-button type="primary" @click="handleEditSubmit">提交</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import SearchMenu from "../../../components/common/SearchMenu.vue";
import InputItem from "../../../components/common/InputItem.vue";
import TableButton from "../../../components/common/TableButton.vue";
import reset from "../../../utils/reset";
import customPagination from "../../../components/customPagination/index.vue";
import ImgUploader from "@/components/common/ImgUploader.vue";
import cancelWarning from "@/mixins/cancelWarning";
export default {
  mixins: [cancelWarning],
  components: {
    SearchMenu,
    InputItem,
    TableButton,
    customPagination,
    ImgUploader,
    // CancelWarning,
  },
  data() {
    return {
      showAddDialog: false,
      showEditDialog: false,
      searchForm: {
        name: "",
      },
      defaultVals: {
        name: "",
      },
      tableData: [],
      defaultDialogData: {
        name: "",
        img: "",
        info: "",
        rank: "",
      },
      addDialogData: {
        name: "",
        img: "",
        info: "",
        rank: "",
      },
      editDialogData: {
        name: "",
        img: "",
        info: "",
        rank: "",
      },
      dialogFormRules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { max: 20, message: "长度不能超过20个字符", trigger: "blur" },
        ],
        info: [
          { required: true, message: "请选择知识信息", trigger: "change" },
        ],
        img: [{ required: true, message: "请上传图片", trigger: "change" }],
        rank: [
          { required: true, message: "请输入排序", trigger: "blur" },
          { max: 10, message: "长度不能超过10个字符", trigger: "blur" },
        ],
      },
      paginationData: {
        pageSize: 10,
        pageIndex: 1,
        total: 100,
      },
      infoOptions: [],
    };
  },
  methods: {
    setPage() {},
    handleSearch() {},
    handleReset() {
      reset(this.searchForm, this.defaultVals);
    },
    handleAdd() {
      this.showAddDialog = true;
      this.addDialogData = {};
    },
    handleEdit(rowData) {
      this.showEditDialog = true;
      this.editDialogData = {
        ...rowData,
      };
    },
    async handleDelete(rowData) {
      this.cancelWarning(() => {
        //发送请求
        
        // console.log(rowData);
      });
    },
    handleGetList() {},
    handleAddSubmit() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          // 发出请求 ...

          this.$message.success("添加成功");
          this.addDialogData = {
            ...this.defaultDialogData,
          };
          this.showAddDialog = false;
          this.setPage();
        } else {
          this.$message.error("请正确填写信息");
        }
      });
    },
    handleEditSubmit() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          // 发出请求 ...

          this.$message.success("编辑成功");
          this.showEditDialog = false;
          this.setPage();
        } else {
          this.$message.error("请正确填写信息");
        }
      });
    },
  },
  async created() {
    this.tableData = [
      {
        id: 0,
        name: "胡彦斌",
        img: "https://blog.net/1.png",
        desc: "复旦大学研究室主任",
        info: "信息标题",
        rank: null,
      },
      {
        id: 1,
        name: "胡彦斌",
        img: "https://blog.net/1.png",
        desc: "复旦大学研究室主任",
        info: "信息标题",
        rank: null,
      },
      {
        id: 2,
        name: "胡彦斌",
        img: "https://blog.net/1.png",
        desc: "复旦大学研究室主任",
        info: "信息标题",
        rank: null,
      },
    ];
    this.infoOptions = [
      {
        label: "选项1",
        value: 1,
      },
      {
        label: "选项2",
        value: 2,
      },
      {
        label: "选项3",
        value: 3,
      },
    ];
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/componentCommon.scss";
.league-container {
  @include pageComp;
  .dialog-line {
    display: flex;
    width: 100%;
    .dialog-item {
      // display: inline-block;
      width: 50%;
      .dialog-input {
        width: 100%;
      }
    }
  }
  .dialog-item {
    width: 50%;
    display: flex;
  }
  .textarea {
    width: 90%;
  }
}
</style>